<template>
  <div class="box">
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="textarea"
      maxlength="140" show-word-limit>
    </el-input>
    <el-button type="danger" size="medium" @click="send()" style="margin-top: 5px">评论</el-button>
    <div class="content">
      <div v-if="hotComments !== undefined">
        <div style="margin-bottom: 10px" v-if="hotComments !== undefined">
          热门评论
        </div>
        <div v-for="item in hotComments" :key="item.commentId"
          style="border-bottom: 1px solid gainsboro; margin-bottom: 10px">
          <div class="avatarUrl">
            <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy />
          </div>
          <div class="top">
            <div class="userDesc">
              <div class="desc">
                {{ item.user.nickname }}: {{ item.content }}
              </div>
              <!-- 回复评论 -->
              <div class="bot">
                <div>{{ item.time | dateFormat }}</div>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <div class="el-icon-chat-dot-square"></div>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                      size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
                    <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                      @click="restore(item.commentId)">评论</el-button>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div style="margin-top: 20px">最新评论({{ total }})</div>
        <div v-for="item in comments" :key="item.commentId" style="border-bottom: 1px solid gainsboro">
          <div class="avatarUrl">
            <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy />
          </div>
          <div class="top">
            <div class="userDesc">
              <div class="desc">
                {{ item.user.nickname }}: {{ item.content }}
              </div>
              <!-- 回复评论 -->
              <div class="bot">
                <div>{{ item.time | dateFormat }}</div>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <div class="el-icon-chat-dot-square"></div>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-input type="textarea" placeholder="请输入内容" v-model="textarea2" maxlength="140" show-word-limit
                      size="medium" style="margin-bottom: 10px; width: 500px"></el-input>
                    <el-button type="danger" size="medium" style="margin-bottom: 10px; margin-left: 10px"
                      @click="restore(item.commentId)">评论</el-button>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>

          <!-- 子评论开始 -->
          <div v-for="(item, i) in item.beReplied" :key="i">
            <!-- 查看子评论 -->
            <div class="userDescTwo">
              <div class="avatarUrl">
                <el-image :src="item.user.avatarUrl" @click="userInfo(item.user)" lazy></el-image>
              </div>
              <!-- <div class="nickname"></div> -->
              <div class="desc" style="margin-left: 60px">
                {{ item.user.nickname }}:{{ item.content }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器开始 -->
    <div class="block">
      <el-pagination :page-size="20" @current-change="handleCurrentChange" layout="total , prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  computed: {
    ...mapState(['vBes']),
  },
  mounted() {
    if (this.vBes !== null) {
      this.getData(this.vBes.vBes.vid);
    }
  },
  watch: {
    vBes(newVal, oldVal) {
      this.getData(newVal.vBes.vid);
    },
  },
  data() {
    return {
      textarea: '',
      textarea2: '',
      limit: 20, // 单页数量
      offset: 0, // 页数
      hotComments: null, // 热门评论
      comments: null, // 普通评论
      total: 0,
      timer: null,
    };
  },
  methods: {
    ...mapActions(['saveUserId']),
    async getData(e) {
      this.$api
        .videoCom({ id: e, limit: this.limit, offset: this.offset, cookie: localStorage.getItem('cookie'), timestamp: this.$utils.timestamp() })
        .then((ret) => {
          this.hotComments = ret.hotComments;
          this.comments = ret.comments;
          this.total = ret.total;
        });
      clearTimeout(this.timer)
    },

    // 翻页
    handleCurrentChange: debounce(function (e) {
      this.offset = (e - 1) * 20;
      if (this.offset > this.total) {
        this.offset = (e - 1) * 20 - (this.offset - this.total) - 1;
        this.getData(this.vBes.vBes.vid);
      } else {
        this.getData(this.vBes.vBes.vid);
      }
       
    }, 1000),

    // 回复评论
    async restore(e) {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea2 === '') {
        this.$message.error('回复内容不能为空!!!');
      } else {
        this.$api
          .resComment({
            type: 5,
            id: this.vBes.vBes.vid,
            content: this.textarea2,
            commentId: e,
            cookie: localStorage.getItem('cookie'),
          })
          .then((ret) => {
            this.$message({
              message: '回复成功',
              type: 'success',
            });
            this.textarea2 = '';
            this.timer = setTimeout(() => {
              this.getData(this.vBes.vBes.vid);
            }, 1000);
          });
      }
    },

    // 给歌单发送评论
    async send() {
      if (localStorage.getItem('cookie') === null) {
        this.$message.error('需要登录!!!');
      } else if (this.textarea === '') {
        this.$message.error('评论内容不能为空!!!');
      } else {
        this.$api
          .sendComment({
            type: 5, // 视频模式
            id: this.vBes.vBes.vid,
            content: this.textarea,
            cookie: localStorage.getItem('cookie'),
          })
          .then((ret) => {
            this.$message({
              message: '评论成功',
              type: 'success',
            });
            this.textarea = '';
            this.timer = setTimeout(() => {
              this.getData(this.vBes.vBes.vid);
            }, 1000);
          });
      }
    },

    userInfo(e) {
      console.log(e)
      this.saveUserId({ userid: e.userId })
      this.$router.push('/userPage');
    }
  },
};
</script>

<style scoped>
.box {
  margin-top: 10px;
  position: relative;
}

.el-input {
  height: 100px !important;
}

.content {
  margin-top: 20px;
  justify-content: end;
  flex-direction: column;
  position: relative;
}

.avatarUrl .el-image {
  position: absolute;
  width: 45px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: 10px;
}

.top {
  display: flex;
  margin-left: 60px;
  align-items: center;
  height: 71px;
}

.userDesc {
  margin-bottom: 20px;
}

.desc {
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  margin-top: 20px;
}

.nickname {
  font-size: 15px;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot {
  display: flex;
  width: 100%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #000000;
}

.el-icon-chat-dot-square {
  font-size: 20px;
}

.el-dropdown {
  position: absolute;
  right: 0;
}

.userDescTwo {
  background: gainsboro;
  display: flex;
  position: relative;
  height: 70px;
}
</style>
